<!DOCTYPE html>
<html class="" lang="en">
<head  >

    {% include 'twig/common/header/include.twig' %}
    <script src="/dev/lib/jquery.form.js"></script>
    <script src="/dev/lib/url_param.js?v=<?=_version?>" type="text/javascript" charset="utf-8"></script>
    <script src="/dev/lib/handlebars-v4.0.10.js" type="text/javascript" charset="utf-8"></script>
    <script src="/dev/js/handlebars.helper.js?v=<?=_version?>" type="text/javascript" charset="utf-8"></script>
    <script src="/dev/js/project/label.js?v=<?=_version?>" type="text/javascript" charset="utf-8"></script>
    <script src="/dev/lib/bootstrap-paginator/src/bootstrap-paginator.js?v=<?=_version?>"  type="text/javascript"></script>

    <script src="/dev/lib/sweetalert2/sweetalert-dev.js"></script>
    <link rel="stylesheet" href="/dev/lib/sweetalert2/sweetalert-dev.css"/>

</head>
<body class="" data-group="" data-page="projects:issues:index" data-project="xphp">
{% include 'twig/common/body/script.twig' %}

<section class="has-sidebar page-layout max-sidebar">
    {% include 'twig/common/body/page-left.twig' %}

    <div class="page-layout page-content-body">
{% include 'twig/common/body/header-content.twig' %}

<script>
    var findFileURL = "";
</script>
        <div class="page-with-sidebar">
            {% include 'twig/project/common-page-nav-project.twig' %}
            {% include 'twig/project/common-setting-nav-links-sub-nav.twig' %}

            <div class="content-wrapper page-with-layout-nav page-with-sub-nav">
                <div class="alert-wrapper">

                    <div class="flash-container flash-container-page">
                    </div>

                </div>
                <div class="container-fluid container-limited">
                    <div class="content" id="content-body">

                        <div class="row prepend-top-default">
                            <div class="col-lg-3 settings-sidebar">
                                <h4 class="prepend-top-0">
                                    标签
                                </h4>
                                <p>
                                    对事项进行特别标记,一个事项可以有多个标签
                                    <strong></strong>
                                </p>
                            </div>
                            <div class="col-lg-9">
                                <div class="top-area adjust setting-form">
                                    <div class="nav-text">
                                        标签可以更好的识别事项
                                    </div>
                                    <div class="nav-controls">
                                        <a class="btn btn-new label_create_link" data-toggle="modal" href="#modal-create-label-href"  href="javascript:void(0)">添加标签
                                        </a>
                                    </div>
                                </div>

                                <div class="panel panel-default margin-t">
                                    <div class="panel-heading">
                                        <strong>标签</strong>
                                    </div>

                                    <ul class="flex-list content-list " id="list_render_id">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modal-create-label-href">
            <form class="form-horizontal label-form" id="form_create_action" action="/project/label/add?project_id=<?=project_id?>" accept-charset="UTF-8" method="post">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 id="modal-edit-issue_title" class="modal-header-title">添加标签</h3>
                        </div>

                        <div class="modal-body">
                            <div class="form-group">
                                <label class="control-label" for="label_title">名称</label>
                                <div class="col-sm-10">
                                    <input class="form-control" required="required" type="text" name="title" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="label_color">颜色</label>
                                <div class="col-sm-10">
                                    <div class="input-group">
                                        <div class="input-group-addon js-label-color-preview" style="background-color: #428BCA">&nbsp;</div>
                                        <input class="form-control" type="text" value="#428BCA" name="bg_color" id="create_form_bg_color">
                                    </div>
                                    <div class="help-block">
                                        自定义标签颜色.
                                        <br>
                                        或选择下面推荐的颜色之一
                                    </div>
                                    <div class="suggest-colors">
                                        <a style="background-color: #0033CC" data-color="#0033CC" href="#">&nbsp;
                                        </a><a style="background-color: #428BCA" data-color="#428BCA" href="#">&nbsp;
                                        </a><a style="background-color: #44AD8E" data-color="#44AD8E" href="#">&nbsp;
                                        </a><a style="background-color: #A8D695" data-color="#A8D695" href="#">&nbsp;
                                        </a><a style="background-color: #5CB85C" data-color="#5CB85C" href="#">&nbsp;
                                        </a><a style="background-color: #69D100" data-color="#69D100" href="#">&nbsp;
                                        </a><a style="background-color: #004E00" data-color="#004E00" href="#">&nbsp;
                                        </a><a style="background-color: #34495E" data-color="#34495E" href="#">&nbsp;
                                        </a><a style="background-color: #7F8C8D" data-color="#7F8C8D" href="#">&nbsp;
                                        </a><a style="background-color: #A295D6" data-color="#A295D6" href="#">&nbsp;
                                        </a><a style="background-color: #5843AD" data-color="#5843AD" href="#">&nbsp;
                                        </a><a style="background-color: #8E44AD" data-color="#8E44AD" href="#">&nbsp;
                                        </a><a style="background-color: #FFECDB" data-color="#FFECDB" href="#">&nbsp;
                                        </a><a style="background-color: #AD4363" data-color="#AD4363" href="#">&nbsp;
                                        </a><a style="background-color: #D10069" data-color="#D10069" href="#">&nbsp;
                                        </a><a style="background-color: #CC0033" data-color="#CC0033" href="#">&nbsp;
                                        </a><a style="background-color: #FF0000" data-color="#FF0000" href="#">&nbsp;
                                        </a><a style="background-color: #D9534F" data-color="#D9534F" href="#">&nbsp;
                                        </a><a style="background-color: #D1D100" data-color="#D1D100" href="#">&nbsp;
                                        </a><a style="background-color: #F0AD4E" data-color="#F0AD4E" href="#">&nbsp;
                                        </a><a style="background-color: #AD8D43" data-color="#AD8D43" href="#">&nbsp;
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="control-label" for="label_description">描述</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" name="description"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-save" id="btn_create_save">保存</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>

            </form>
        </div>
        <div class="modal" id="modal-edit-label-href">
            <form class="form-horizontal label-form" id="form_edit_action" action="/project/label/update?project_id=<?=project_id?>" accept-charset="UTF-8" method="post">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 id="modal-edit-issue_title" class="modal-header-title">编辑标签</h3>
                        </div>

                        <div class="modal-body">
                            <input name="utf8" type="hidden" value="✓">
                            <input type="hidden" name="authenticity_token" value="">
                            <input type="hidden" name="id" value="" id="label_form_id">

                            <div class="form-group">
                                <label class="control-label" for="label_title">名称</label>
                                <div class="col-sm-10">
                                    <input class="form-control" required="required" type="text" name="title" id="label_form_title" value="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="label_color">颜色</label>
                                <div class="col-sm-10">
                                    <div class="input-group">
                                        <div class="input-group-addon js-label-color-preview">&nbsp;</div>
                                        <input class="form-control" type="text" value="" name="bg_color" id="label_form_label_color" >
                                    </div>
                                    <div class="help-block">
                                        自定义标签颜色.
                                        <br>
                                        或选择下面推荐的颜色之一
                                    </div>
                                    <div class="suggest-colors">
                                        <a style="background-color: #0033CC" data-color="#0033CC" href="#">&nbsp;
                                        </a><a style="background-color: #428BCA" data-color="#428BCA" href="#">&nbsp;
                                        </a><a style="background-color: #44AD8E" data-color="#44AD8E" href="#">&nbsp;
                                        </a><a style="background-color: #A8D695" data-color="#A8D695" href="#">&nbsp;
                                        </a><a style="background-color: #5CB85C" data-color="#5CB85C" href="#">&nbsp;
                                        </a><a style="background-color: #69D100" data-color="#69D100" href="#">&nbsp;
                                        </a><a style="background-color: #004E00" data-color="#004E00" href="#">&nbsp;
                                        </a><a style="background-color: #34495E" data-color="#34495E" href="#">&nbsp;
                                        </a><a style="background-color: #7F8C8D" data-color="#7F8C8D" href="#">&nbsp;
                                        </a><a style="background-color: #A295D6" data-color="#A295D6" href="#">&nbsp;
                                        </a><a style="background-color: #5843AD" data-color="#5843AD" href="#">&nbsp;
                                        </a><a style="background-color: #8E44AD" data-color="#8E44AD" href="#">&nbsp;
                                        </a><a style="background-color: #FFECDB" data-color="#FFECDB" href="#">&nbsp;
                                        </a><a style="background-color: #AD4363" data-color="#AD4363" href="#">&nbsp;
                                        </a><a style="background-color: #D10069" data-color="#D10069" href="#">&nbsp;
                                        </a><a style="background-color: #CC0033" data-color="#CC0033" href="#">&nbsp;
                                        </a><a style="background-color: #FF0000" data-color="#FF0000" href="#">&nbsp;
                                        </a><a style="background-color: #D9534F" data-color="#D9534F" href="#">&nbsp;
                                        </a><a style="background-color: #D1D100" data-color="#D1D100" href="#">&nbsp;
                                        </a><a style="background-color: #F0AD4E" data-color="#F0AD4E" href="#">&nbsp;
                                        </a><a style="background-color: #AD8D43" data-color="#AD8D43" href="#">&nbsp;
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="control-label" for="label_description">描述</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" id="label_form_description" name="description"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-save" id="btn_edit_save">保存</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>

                    </div>
                </div>

            </form>
        </div>

    </div>
</section>


{% verbatim %}<script type="text/html" id="list_tpl">
    {{#labels}}
    <li data-id="{{id}}" id="project_label_{{id}}">
        <span class="label-row">
            <span class="label-name">
                <a href="{% endverbatim %}<?=project_root_url?>{% verbatim %}?sys_filter=label_{{id}}">
                    <span class="label color-label " style="background-color: {{bg_color}}; color: {{color}}" title="{{description}}" data-container="body">{{title}}</span>
                </a>
            </span>
            <span class="label-type">
                {{description}}
            </span>
        </span>

        <div class="pull-right hidden-xs hidden-sm hidden-md">
            <a title="编辑" class="btn btn-transparent btn-action label_edit_link"  href="#modal-edit-label-href" data-toggle="modal" data-id="{{id}}" href="javascript:void(0)">
                <i class="fa fa-pencil-square-o"></i>
            </a>

            <a title="删除" class="btn btn-transparent btn-action remove-row label_edit_remove" data-id="{{id}}"    href="javascript:void(0)">
                <i class="fa fa-trash-o"></i>
            </a>
        </div>

    </li>
    {{/labels}}
</script>{% endverbatim %}

<script>
    var query_str = '<?=query_str?>';
    var urls = parseURL(window.location.href);
    var project_root_url = '<?=project_root_url?>';
    var _project_id = '<?=project_id?>';

    $(function() {
        let options = {
            query_str: window.query_str,
            query_param_obj: urls.searchObject,
            list_render_id:"list_render_id",
            list_tpl_id:"list_tpl",
            filter_url:"/project/label/list_data?project_id=<?=project_id?>"
        };
        window.$labels = new Label(options);
        window.$labels.fetchAll();

        $('#btn_create_save').click(function () {
            window.$labels.add(<?=project_id?>);
        });

        $('#btn_edit_save').click(function () {
            window.$labels.update(<?=project_id?>);
        });

        $('#form_create_action .suggest-colors a').click(function () {
            $('#create_form_bg_color').val($(this).data("color"));
            $('#form_create_action .js-label-color-preview').css("background-color", $(this).data("color"));
        });

        $('#form_edit_action .suggest-colors a').click(function () {
            $('#label_form_label_color').val($(this).data("color"));
            $('#form_edit_action .js-label-color-preview').css("background-color", $(this).data("color"));
        });

    });

</script>


</body>
</html>
